<template>
    <div class="sales content_body">
        <div class='content_header'>
            <a-form
                layout="inline"
                :model="formState"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
            >
                <a-form-item label="商品名称">
                <a-input v-model:value="formState.link_name" placeholder="商品名称" />
                </a-form-item>
                <a-form-item label="所属店铺">
                <a-input v-model:value="formState.shop" placeholder="所属店铺" />
                </a-form-item>
                <a-form-item label="颜色">
                <a-input v-model:value="formState.color" placeholder="颜色" />
                </a-form-item>
                <a-form-item label="金额">
                <a-input v-model:value="formState.amount" placeholder="金额" />
                </a-form-item>
                <a-form-item>
                <a-button
                    type="primary"
                    html-type="submit"
                >
                    查询
                </a-button>
                 <a-button
                    type="default"
                    style="margin-left:10px;"
                >
                    重置
                </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div class='content_bottom'>
            <div class='content_btn'>
                <a-button type="primary" @click="handleAdd">新增</a-button>
            </div>
            <div class='content_table'>
                <a-table :columns="columns" :data-source="data" >
                    <!-- 自定义列渲染 -->
                    <template #action="{ record }">
                        <EditOutlined @click="edit(record)" style="fontSize:24px;color:#09c4ee ;margin-right:8px;" title="编辑" />
                        <a-popconfirm
                            title="确定删除该条记录吗?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="remove(record)"
                            @cancel="cancel"
                        >
                            <DeleteOutlined style="fontSize:24px;color:#ddd ;margin-right:8px;" title="删除" />
                        </a-popconfirm>
                    </template>
                </a-table> 
            </div>
        </div>
        <a-modal 
            v-model:open="open" 
            :title='modalTitle' 
            width="360px"
            :footer="null"
        >
           <a-form
            :label-col="{ span: 7 }"
            :wrapper-col="{ span: 17 }"
            ref="addForm"
            :model="recordItem"
            autocomplete="off"
            @finish="onFinish1"
            @finishFailed="onFinishFailed1"
           >
            <a-form-item label="选择商品" name="pro_code"
                :rules="[{ required: true, message: '必填项' }]"
            >
                <a-select v-model:value="recordItem.pro_code" style="width: 200px;"
                    aria-placeholder="请选择商品"
                ></a-select>
            </a-form-item>
            <a-form-item label="数量" name="number" :rules="[{ required: true, message: '必填项' }]" >
                <a-input-number style="width: 200px;" min="1" v-model:value="recordItem.number"  />
            </a-form-item>
            <a-form-item label="单价" name="price" :rules="[{ required: true, message: '必填项' }]">
                <a-input style="width: 200px;" v-model:value="recordItem.price" :disabled="true" />
            </a-form-item>
            <a-form-item label="金额" name="amount" :rules="[{ required: true, message: '必填项' }]" >
                <a-input style="width: 200px;" v-model:value="recordItem.amount" :disabled="true" />
            </a-form-item>
            <a-form-item label="颜色" name="color" :rules="[{ required: true, message: '必填项' }]">
                <a-select v-model:value="recordItem.color" style="width: 200px;"
                    aria-placeholder="请选择颜色"
                ></a-select>
            </a-form-item>
            <a-form-item label="sku" name="sku" :rules="[{ required: true, message: '必填项' }]">
                <a-select v-model="recordItem.sku" style="width: 200px;"
                    aria-placeholder="请选择sku"
                ></a-select>
            </a-form-item>
            <a-form-item label="操作人" name="operation" :rules="[{ required: true, message: '必填项' }]" v-model:value="recordItem.operation">
                <a-select v-model="recordItem.operation" style="width: 200px;"
                    aria-placeholder="请选择操作人"
                ></a-select>
            </a-form-item>
            <a-form-item label="操作日期" name="op_date" :rules="[{ required: true, message: '必填项' }]">
                <a-date-picker format="YYYY-MM-DD" v-model:value="recordItem.op_date" placeholder="请选择日期"  />
            </a-form-item>
            <a-form-item label="来源店铺" name="from_shop" :rules="[{ required: true, message: '必填项' }]" v-model:value="recordItem.from_shop">
                <a-select v-model="recordItem.operation" style="width: 200px;"
                    aria-placeholder="请选择店铺"
                ></a-select>
            </a-form-item>
            <a-form-item style="text-align:right;width:100%;" :wrapperCol="24">
                 <a-button
                    type="default"
                    style="margin-right:10px;"
                    @click="handleCancel"
                >
                    取消
                </a-button>
                <a-button
                    type="primary"
                    html-type="submit"
                >
                    确定
                </a-button>
            </a-form-item>
           </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import '../../utils/util.scss';
import { reactive,h, ref, computed } from 'vue';
import { UserOutlined, LockOutlined , EditOutlined , DeleteOutlined} from '@ant-design/icons-vue';
import type { UnwrapRef } from 'vue';
import type { FormProps, Button, Form, Select, FormInstance } from 'ant-design-vue';
import moment, { Moment } from 'moment';

interface FormState {
  link_name: string;
  shop: string;
  color: string;
  amount: string
}

interface recordItem {
    pro_code: string,
    pro_name: string,
    number: Number | null,
    price: Number | null,
    amount: Number | null,
    color: string,
    sku: string,
    operation: string,
    op_date: Moment,
    from_shop: string
}
const formState: UnwrapRef<FormState> = reactive({
  link_name: '',
  shop: '',
  color: '',
  amount: ''
});

const recordItem = ref<recordItem>({
     pro_code: '',
    pro_name: '',
    number: null,
    price: null,
    amount: null,
    color: '',
    sku: '',
    operation: '',
    op_date: moment(new Date()),
    from_shop: ''
})

const record = ref(null);
const open = ref(false);
const modalTitle = ref('');
const addForm = ref<FormInstance>();

const columns = [
    {
        title: '订单编号',
        dataIndex: 'code',
        key: 'code',
    },
    {
        title: '商品编号',
        dataIndex: 'pro_code',
        key: 'pro_code',
    },
    {
        title: '商品名称',
        dataIndex: 'pro_name',
        key: 'pro_name',
    },
    {
        title: '数量',
        dataIndex: 'number',
        key: 'number',
    },
    {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
    },
    {
        title: '金额',
        dataIndex: 'amount',
        key: 'ampunt',
    },
    {
        title: '规格',
        dataIndex: 'sku',
        key: 'sku',
    },
    {
        title: '颜色',
        dataIndex: 'color',
        key: 'color',
    },
    {
        title: '操作人',
        dataIndex: 'operation',
        key: 'operation',
    },
    {
        title: '操作日期',
        dataIndex: 'op_date',
        key: 'op_date',
    },
    {
        title: '所属店铺',
        dataIndex: 'from_shop',
        key: 'from_shop',
    },
    {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' }
    }
];
const data = [{
    code: '10001',
    pro_code: '101',
    pro_name: 'pandaer卫衣',
    sts: '上架',
    type:'成品',
    sku: 'L',
    price: '99.99',
    number: '20',
    amount: '1999',
    color: '红色',
    operation: '',
    op_date: '2024-09-10',
    from_shop: ''
}];
const handleFinish: FormProps['onFinish'] = values => {
  console.log(values, formState);
};
const handleFinishFailed: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};
const handleFinish1: FormProps['onFinish'] = values => {
  console.log(values, recordItem);
};
const handleFinishFailed1: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};

const edit = (record: any) => {
    open.value = true;
    modalTitle.value = '编辑销售单'
    recordItem.value = {...record};
    recordItem.value.op_date = moment(record.op_date);
    recordItem.value.number = 20;
    recordItem.value.price = 99.99;
    recordItem.value.amount = 1111;
    console.log(recordItem.value)
}
const remove = (record:any) => {

}

const handleAdd = () => {
    open.value = true;
    modalTitle.value = '新增销售单'
}

const handleCancel = () => {
    addForm.value?.resetFields();
    open.value = false;
}

</script>